<template>
  <div class="homeheader">
    <div class="left">
        <h1>
            <a href="http://amoyzxy.com/">
                <img src="../../../../static/img/logo.jpg">
            </a>
        </h1>
    </div>
    <!-- <div class="center">
        <p>咨询/售后热线</p>
        <p>4000-919870</p>
    </div> -->
    <div class="right" @click="display">
        <img src="../../../../static/img/nav-icon-home-default.png">
    </div>
    <transition name="slide-fade">
    <div class="menu-bar" v-show="menuBarShow">
        <div class="home">
            <router-link to="/">
                <div>
                   <img src="../../../../static/img/home.png">
                </div>
                <h2>首页</h2>
            </router-link>
            <span></span>
        </div>
        <div class="company">
             <router-link to="/CompanyIntroduction">
                <div>
                    <img src="../../../../static/img/product.png">
                </div>
                <h2>企业介绍</h2>
            </router-link>
            <span></span>
        </div>
        <div class="product-display">
             <router-link to="/ProductsVideo">
                <div>
                    <img src="../../../../static/img/company.png">
                </div>
                <h2>产品展示</h2>
            </router-link>
            <span></span>
        </div>
        <div class="company">
             <router-link to="/ProductsVideo">
                <div>
                    <img src="../../../../static/img/video.png">
                </div>
                <h2>功能视频</h2>
            </router-link>
            <span></span>
        </div>
        <div class="news">
             <router-link to="/NewsDetails">
                <div>
                    <img src="../../../../static/img/news.png">
                </div>
                <h2>新闻资讯</h2>
            </router-link>
            <span></span>
        </div>
        <div class="safety">
             <router-link to="/SafetyPromotion">
                <div>
                    <img src="../../../../static/img/safety.png">
                </div>
                <h2>安全宣传</h2>
            </router-link>
            <span></span>
        </div>
        <div class="contact">
             <router-link to="/Application">
                <div>
                    <img src="../../../../static/img/application.png">
                </div>
                <h2>合作伙伴</h2>
            </router-link>
            <span></span>
        </div>
        <div class="application">
             <router-link to="/Contact">
                <div>
                    <img src="../../../../static/img/contact.png">
                </div>
                <h2>联系方式</h2>
            </router-link>
            <span></span>
        </div>
    </div>
    </transition> 
  </div>
</template>
<script>
export default {
  name: 'HomeHeader',
  data(){
      return {
        menuBarShow: false
      }
  },
  methods: {
       display(){
          this.menuBarShow = !this.menuBarShow;
      }
  }
}
</script>
<style scoped>
.homeheader{
    width: 100%;
    height: .88rem;
}
.homeheader .left{
     width: 1.85rem;
     height: .81rem;
     margin-left: .2rem;
     float: left;
}   
.homeheader .left h1{
     width: 1.85rem;
     height: .81rem;
}   
.homeheader .left h1 a{
    width: 1.85rem;
    height: .81rem;
    display: inline-block;
}       
.homeheader .left h1 a img{
    width: 100%;
    height: auto;
}        
/* .homeheader .center{
    width: 2.5rem;
    height: auto;
    margin-left: .9rem;
    margin-top: .06rem;
    float: left;
}        
.homeheader .center p{
    width: 100%;
    height: .34rem;
    font-size: 14px;
    color: #1d2977;
    font-weight: bolder;
    text-align: center;
}                */
.homeheader .right{
     width: .5rem;
     height: .5rem;
     margin-right: .2rem;
     margin-top: .19rem;
     float: right;
}        
.homeheader .right img{
    width: 100%;
    height: auto;
}    
.homeheader .menu-bar{
    position: fixed;
    top: 1rem;
    right: 0;
    width: 2rem;
    height: auto;
    z-index: 1;
}
.homeheader .menu-bar .home{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .home a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .home div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .4rem;
    left: .2rem;
}
.homeheader .menu-bar .home img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .home h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .52rem;
    right: .45rem; 
}
.homeheader .menu-bar .home span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .product-display{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .product-display a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .product-display div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .23rem;
}
.homeheader .menu-bar .product-display img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .product-display h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .5rem;
    right: .18rem; 
}
.homeheader .menu-bar .product-display span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .company{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .company a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .company div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .23rem;
}
.homeheader .menu-bar .company img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .company h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .5rem;
    right: .18rem; 
}
.homeheader .menu-bar .company span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .news{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .news a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .news div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .3rem;
    left: .2rem;
}
.homeheader .menu-bar .news img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .news h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .46rem;
    right: .17rem; 
}
.homeheader .menu-bar .news span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .safety{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .safety a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .safety div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .29rem;
    left: .2rem;
}
.homeheader .menu-bar .safety img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .safety h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .46rem;
    right: .17rem; 
}
.homeheader .menu-bar .safety span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .contact{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .contact a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .contact div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .24rem;
}
.homeheader .menu-bar .contact img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .contact h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .46rem;
    right: .18rem; 
}
.homeheader .menu-bar .contact span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.homeheader .menu-bar .application{
    width: 100%;
    height: 1.26rem;
    background-color: #1d2977;
    position: relative;
}
.homeheader .menu-bar .application a{
    width: 100%;
    height: 1.26rem;
    display: inline-block;
}
.homeheader .menu-bar .application div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .24rem;
}
.homeheader .menu-bar .application img{
    width: 100%;
    height: auto;
}
.homeheader .menu-bar .application h2{
    font-size: .26rem;
    color: #fefefe;
    position: absolute;
    top: .46rem;
    right: .18rem; 
}
.homeheader .menu-bar .application span{
    width: 100%;
    display: inline-block;
    border-bottom: .02rem solid #fff;
    position: absolute;
    bottom: 0;
}
.slide-fade-enter-active {
  transition: all .4s ease;
}
.slide-fade-leave-active {
  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(.2rem);
  opacity: 0;
}
@media screen and (max-width: 320px) {
    .homeheader .center{
    width: 2.5rem;
    height: auto;
    margin-left: 1rem;
    margin-top: .05rem;
    float: left;
}        
.homeheader .center p{
    width: 100%;
    height: .34rem;
    font-size: 12px;
    color: #1d2977;
    font-weight: bolder;
}
.homeheader .menu-bar .home div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .4rem;
    left: .15rem;
}
.homeheader .menu-bar .home div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .4rem;
    left: .15rem;
}
.homeheader .menu-bar .product-display div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .15rem;
}
.homeheader .menu-bar .company div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .15rem;
}
.homeheader .menu-bar .news div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .3rem;
    left: .15rem;
}
.homeheader .menu-bar .safety div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .29rem;
    left: .15rem;
}
.homeheader .menu-bar .contact div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .15rem;
}
.homeheader .menu-bar .application div{
    width: .48rem;
    height: .48rem;
    position: absolute;
    top: .43rem;
    left: .15rem;
}          
}            
</style>
